<template>
	<view>
		<view class="uni-column">
			<view class="content" id="content" :style="{height:style.contentViewHeight+'px'}">
				<scroll-view id="scrollview"   
					scroll-y="true" 
					:style="{height:style.contentViewHeight+'px'}" 
					:scroll-with-animation="true"
				    :scroll-top="scrollTop"
					class="scroll-Y"
					:scroll-into-view="viewIndex">
					<message-show v-for="(message,index) in messages" :key="index" v-bind:message="message" :id="index"></message-show>
					<view :id="'im_'+messages.length" id="bottom"></view> 
					<!-- 立即报名 -->
					<view >
					 	<uni-card margin="38px" spacing="20px">
							<u-button 
							type="primary" 
							:plain="true" 
							text="点我 立即报名"
							@click="toApplyInFo()"
							></u-button>
						</uni-card>
					</view>
					<!-- 咨询专业 -->
					<view>
					 	<uni-card margin="38px" spacing="20px" title="请选择您要咨询专业">
					 		<u-radio-group
								placement="column"
					 		    @change="groupChange"
								activeColor="#5555ff"
					 		>
								<u-radio
									:customStyle="{marginBottom: '8px'}"
									v-for="(item, index) in radiolist"
									:key="index"
									:label="item.majorName"
									:name="item.majorId"
									
								>
								</u-radio>
							</u-radio-group>
						</uni-card>
					</view>
					<!-- 咨询人信息 -->
					<view >
					 	<uni-card margin="38px" spacing="20px" title="请填写您的信息">
							<label>姓名</label>
							<u--input
								placeholder="请输入您的姓名"
								border="surround"
								v-model="consultUser.consultName"
								shape="circle"
								@blur="consultRealnameBlur()"
							></u--input>
							<label>专业基础</label>
							<u--input
								placeholder="请输入您的专业基础"
								border="surround"
								v-model="consultUser.consultBasics"
								shape="circle"
								@blur="consultBasicsBlur()"
							></u--input>
						</uni-card>
					</view>
				</scroll-view>	
			</view>
			
			<view class="foot">
				<chat-input @send-message="getInputMessage"></chat-input>
			</view>
		</view>
		<view @click="openQQ()">
			<uni-drag-button></uni-drag-button>
		</view>
	</view>  
</template>

<script>
	import chatInput from '../../../components/chatinput.vue';
	import messageShow from '../../../components/messageshow.vue';
	var curPoint = {  
	    x: 0,  
	    y: 0  
	}; // 记录原点  
	var startPoint = {};  
	// 标志位（只触发点击事件按，并没有移动-就不必触发end事件）  
	var isTouchMove = false;  
	export default {
		data() {
			return {
				getconsult:{},
				consultUser:{id:"",consultId:"",consultMajor:"",consultName:"",consultRealname:"",consultPhone:"",consultTime:"",consultBasics:"",delFlag:0},
				consultUrl:{
					getMajorUrl:"/major/major/majorList",
					applyStuConsultBuPhoneUrl:"/applystuconsult/applyStuConsult/queryByPhone",
					applyAddStuConsultUrl:"/applystuconsult/applyStuConsult/addConsult",
					applyUpStuConsultUrl:"/applystuconsult/applyStuConsult/upConsult"
				},
				radiolist: [],
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0,
				},
				scrollTop: 0,
				messages: [
					{
						user: 'home',
						type: 'head', //input,content 
						content: '你好!'
					},
					{
						user: 'home',
						type: 'head', //input,content 
						content: '选择咨询类型,让我们为您提供更好的服务'
					},
				],
				viewIndex: ''
			};
		},
		components: {
			chatInput,
			messageShow
		},
		created: function () {
			const res = uni.getSystemInfoSync();
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素
			/* 查询专业 */
			this.$axios.get(this.consultUrl.getMajorUrl).then((res)=>{
				if(res.data.success){
					this.radiolist=res.data.result
				}
			})
		},
		methods: {
			/* 刷新咨询记录 */
			consultFlush(){
				const user=uni.getStorageSync('user')
				this.$axios.get(this.consultUrl.applyStuConsultBuPhoneUrl+"?consultPhone="+user.userPhone).then((res)=>{
					if(res.data.success){
						if(res.data.result==null){
							this.consultUser.consultPhone=user.userPhone
							this.$axios.post(this.consultUrl.applyAddStuConsultUrl,this.consultUser).then((respadd)=>{})
						}else{
							this.getconsult=res.data.result
							if(this.consultUser.consultMajor!=null||this.consultUser.consultMajor!=undefined){
								this.getconsult.consultMajor=this.consultUser.consultMajor
							}
							this.getconsult.consultName=this.consultUser.consultName
							this.getconsult.consultBasics=this.consultUser.consultBasics
							this.$axios.post(this.consultUrl.applyUpStuConsultUrl,this.getconsult).then((respup)=>{})
						}
					}
				})
			},
			/* 姓名失焦事件 */
			consultRealnameBlur(){
				this.consultFlush()
			},
			/* 专业基础失焦事件 */
			consultBasicsBlur(){
				this.consultFlush()
			},
			/* 单选事件 */
			groupChange(n) {
				this.consultUser.consultMajor=n
				this.consultFlush()
			},
			getInputMessage: function (message) { //获取子组件的输入数据
				// console.log(message);
				this.addMessage('customer', message.content, false);
				this.toRobot(message.content);
			},
			addMessage: function (user, content, hasSub, subcontent) {
				var that = this;
				that.messages.push({
					user: user,
					content: content,
					hasSub: hasSub,
					subcontent: subcontent
				});
				this.viewIndex = "";  
				//设置viewIndex值，使聊天滚动到底部  
				this.$nextTick(() => {  
					this.viewIndex = "im_" + this.chatList.length;  
				});
			},
			scrollToBottom: function () {
				var that = this;
				var query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
			
				query.exec(function (res) {
					that.style.mitemHeight = 0;
					res[0].forEach(function (rect) {
						// console.info(rect.height);
						that.style.mitemHeight = that.style.mitemHeight + rect.height + 20;
					});
			
					if (that.style.mitemHeight > that.style.contentViewHeight) {
						that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight;
					}
				});
			},
			/* 自动回复 */
			toRobot: function (info) {
				this.addMessage('home', "点击咨询，联系您的专属老师", false);
				this.scrollToBottom();
			},
			
			/* 打开qq */
			openQQ: function () {  
				// console.log("e.detail.value: " + JSON.stringify(e.detail.value));  
				plus.runtime.openURL('mqqwpa://im/chat?chat_type=crm&uin=1325506175',function (res) {  
					plus.nativeUI.alert("本机没有安装QQ，无法启动");  
				});  
			},
			toApplyInFo(){
				uni.navigateTo({
					url: '/pages/index/applyinfo/applyinfor'
				});
			}
		}  
	}
</script>

<style lang="scss">
	
	.uni-column {
		display: flex;
		flex-direction: column;
	}
	.content {
	
		display: flex;
		flex: 1;
		margin-bottom: 100px;
		 
	}
	.foot {
		position: fixed;
		width: 100%;
		height: 90px;
		min-height: 90px;
		left: 0px;
		bottom: 0px;
		overflow: hidden;
	}
	page{
		min-height: 100%;
		background-color: #f3f1eb;
		height: 100%;
		font-size: 18px;
		line-height: 1.2;
	}
</style>
